<i
  class="input-after-icon hand-model"
  nz-icon
  nz-popover
  nzPopoverTrigger="click"
  nzTheme="outline"
  [nzPopoverContent]="contentTemplate"
  [nzPopoverTitle]="searchTitle"
  [nzType]="selectedIcon || 'appstore'"
  [(nzPopoverVisible)]="visible"
></i>
<ng-template #searchTitle>
  <input nz-input [placeholder]="'搜索图标的type'" (input)="searchIcon($event)" />
</ng-template>
<ng-template #contentTemplate>
  <nz-card style="width: 300px; max-height: 220px; overflow: auto" [nzBodyStyle]="{ padding: '0' }" [nzBorderless]="true">
    @if (iconsStrShowArray && iconsStrShowArray.length > 0) {
      <nz-card>
        @for (item of iconsStrShowArray; track item) {
          <div class="center" nz-card-grid [ngStyle]="gridStyle" (click)="selIconFn(item)">
            <i class="sp-18" nz-icon nzTheme="outline" [ngStyle]="{ color: item.isChecked ? '#409eff' : '' }" [nzType]="item.icon"></i>
          </div>
        }
      </nz-card>
    } @else {
      <nz-empty></nz-empty>
    }
  </nz-card>
  <nz-pagination
    class="m-t-10"
    nzShowSizeChanger
    style="max-width: 300px"
    [nzPageSize]="pageObj.pageSize"
    [nzPageSizeOptions]="[20, 50]"
    [nzSize]="'small'"
    [nzTotal]="iconsStrAllArray.length"
    [(nzPageIndex)]="pageObj.pageIndex"
    (nzPageIndexChange)="getData($event)"
    (nzPageSizeChange)="pageSizeChange($event)"
  ></nz-pagination>
</ng-template>
